<script setup>
import { ref } from 'vue'
import axios from 'axios'

// 注册登录
const register = ref(true)
const login = ref(false)
const router = useRouter()

//定义注册和登录数据
const registerData = ref({
    username: '',
    password: '',
    rePassword: ''
})
//切换登录注册
const r = () => {
    register.value = false
    login.value = true
    clear()
}
const l = () => {
    register.value = true
    login.value = false
    clear()
}
const clear = () => {
    registerData.value.username = ''
    registerData.value.password = ''
    registerData.value.rePassword = ''
}

// —————————————————————register接口——————————————————————— //
const registerUser = async () => {
    console.log(registerData.value);
    try {

        if (registerData.value.username == '') {
            alert('请输入用户名')
            console.log("this is", e);
            e.preventDefault()
        }
        else {
            const result = await axios.post(
                'http://localhost:8080/user/register',
                //发送数据到后端
                registerData.value,
                {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }
            );
            if (result.data.code === 0) {
                console.log(result.data);
                alert('注册成功')
                r()
            }
            else {
                alert(result.data.message)
                clear()
            }
        }

    } catch (err) {
        console.error('注册失败:', err);  // 更清晰的错误提示
    }
};

// —————————————————————login接口——————————————————————— //
import { useRouter } from 'vue-router'
const loginUser = async () => {
    try {
        const result = await axios.post(
            'http://localhost:8080/user/login',
            registerData.value,
            {
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        );
        if (result.data.code === 0) {
            alert('登录成功')
            //将token存储到本地
            localStorage.setItem('token', result.data.data)
            router.push('/Article')
        } else {
            alert(result.data.message)
            clear()
        }
        console.log(result.data);
    } catch (err) {
        console.error('登录失败:', err);
    }
}

//————————————————————校验——————————————————————— //
const check = ref(false)
const check2 = ref(false)
const check3 = ref(false)
const checkUsername = () => {
    if (registerData.value.username.length < 3 || registerData.value.username.length > 15) {
        check.value = true
    }
    else {
        check.value = false
    }
}
const checkPassword = () => {
    if (registerData.value.password.length < 5 || registerData.value.password.length > 20) {
        check2.value = true
    }
    else {
        check2.value = false
    }
}
const checkRePassword = () => {
    if (registerData.value.password !== '') {
        if (registerData.value.rePassword == registerData.value.password) {
            check3.value = false
        }
        else {
            check3.value = true
        }
    }
    else {
        check3.value = true
    }
}
</script>


<template>
    <div class="app">
        <!--———————————————————————— register  ————————————————————————-->
        <div class="register" v-if="register">
            <div class="form">
                <div class="title">
                    <img src="../assets/register/return.png" @click="r">
                    <h3 class="text-2xl font-bold  text-white mb-6">Register</h3>
                </div>
                <input class="input" placeholder="请输入用户名" v-model="registerData.username" @blur="checkUsername">
                <div class="errow" v-show="check">用户名长度为3-15位</div>
                <input class="input" placeholder="请输入密码" v-model="registerData.password" @blur="checkPassword">
                <div class="errow" v-show="check2">密码长度为5-20位</div>
                <input class="input" placeholder="请输入确认密码" v-model="registerData.rePassword" @blur="checkRePassword">
                <div class="errow" v-show="check3">与密码不一致</div>
            </div>
            <div class="loginButton">
                <button class="bg-white text-center w-48 rounded-2xl h-14 relative text-black text-xl font-semibold group"
                    type="button" @click="registerUser()">
                    <div
                        class="bg-blue-400 rounded-xl h-12 w-1/4 flex items-center justify-center absolute left-1 top-[4px] group-hover:w-[184px] z-10 duration-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" height="25px" width="25px">
                            <path d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z" fill="#000000"></path>
                            <path
                                d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
                                fill="#000000"></path>
                        </svg>
                    </div>
                    <p class="translate-x-2">注册</p>
                </button>
            </div>
        </div>

        <!--———————————————————————— login  ————————————————————————-->
        <div class="register" v-if="login">
            <div class="form">
                <div class="title">
                    <img src="../assets/register/return.png" @click="l">
                    <h3 class="text-2xl font-bold  text-white mb-6">Login</h3>
                </div>
                <input class="input" placeholder="请输入名称" v-model="registerData.username" @blur="checkUsername">
                <div class="errow" v-show="check">用户名长度为5-15位</div>
                <input class="input" placeholder="请输入密码" v-model="registerData.password" @blur="checkPassword">
                <div class="errow" v-show="check2">密码长度为5-20位</div>
            </div>
            <div class="loginButton">
                <button class="bg-white text-center w-48 rounded-2xl h-14 relative text-black text-xl font-semibold group"
                    type="button" @click="loginUser">
                    <div
                        class="bg-blue-400 rounded-xl h-12 w-1/4 flex items-center justify-center absolute left-1 top-[4px] group-hover:w-[184px] z-10 duration-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" height="25px" width="25px">
                            <path d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z" fill="#000000"></path>
                            <path
                                d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
                                fill="#000000"></path>
                        </svg>
                    </div>
                    <p class="translate-x-2">登录</p>
                </button>
            </div>

        </div>
    </div>
</template>

<style scoped>
.app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url("../assets/register//back.png");
    transform: scaleX(1);
    background-repeat: no-repeat;
    background-size: cover;
}

.register {
    width: 500px;
    height: 550px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.4);
    /* 半透明背景 */
    backdrop-filter: blur(10px);
    margin: 10px;
}

.title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.input {
    border: 2px solid transparent;
    width: 380px;
    height: 2.5em;
    padding-left: 0.8em;
    outline: none;
    overflow: hidden;
    background-color: #F3F3F3;
    border-radius: 10px;
    transition: all 0.5s;
}

.input:hover,
.input:focus {
    border: 2px solid #4A9DEC;
    box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
    background-color: white;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.title h3 {
    text-align: center;
    margin: 10px;
}

.title img {
    position: absolute;
    left: 25px;
    width: 30px;
    height: 30px;
}

.form input {
    margin: 10px;
}

.errow {
    width: 380px;
    display: flex;
    justify-content: flex-start;
    color: red;
    font-size: 14px;
}

.loginButton {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
</style>